<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.table{
	font-size:12px;
	color:#666;
	border-collapse:collapse;
	}
.table th,.table td{
	padding:5px;
	text-align:left;
	border:1px solid #ccc;
	}
@media (max-width: 480px) {
	.table thead tr{
		position:absolute;
		left:-99em;
		}
	.table tr{		
		display:block;		 
		margin-bottom:20px;
		border-bottom:1px solid #ccc;
		box-shadow:0 0 3px #ccc;
		}	 
	.table td{
		padding-left:50%;		 
		border:1px solid #ccc;
		position:relative;
		display: block;
		border-bottom:none;
 		}
	.table td:before{
		position:absolute;
		height:100%;
		width:48%;
 		left:0;
		top:0;
		border-right:1px solid #ccc;
  		display:block;
		line-height:24px;
		text-indent:5px;
		font-weight:bold;
		}
	.table td:before {content: attr(data-title);}
}
</style>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table">
	<thead>
      <tr>
        <th>名称</th>
        <th>价格</th>
        <th>时间</th>
        <th>备注</th>
        <th>操作</th>
     </tr>
  	</thead>
  <tr>
    <td data-title="名称">张三</td>
    <td data-title="价格">200</td>
    <td data-title="时间">2012-12-11</td>
    <td data-title="备注">备注信息</td>
    <td data-title="操作">删除</td>
  </tr>
  <tr>
    <td data-title="名称">张三</td>
    <td data-title="价格">200</td>
    <td data-title="时间">2012-12-11</td>
    <td data-title="备注">备注信息</td>
    <td data-title="操作">删除</td>
  </tr>
  <tr>
    <td data-title="名称">张三</td>
    <td data-title="价格">200</td>
    <td data-title="时间">2012-12-11</td>
    <td data-title="备注">备注信息</td>
    <td data-title="操作">删除</td>
  </tr>  
 </table>

</body>
</html>